<template>
    <div class="main">
        <Header />
        <div class="top">
            <h4>现代简约 明亮的外表卧室卧室背景墙</h4>
            <DataTime :flag="dateTimeItem.flag" :date="dateTimeItem.date" :clickNum = dateTimeItem.clickNum  />
        </div>
        <hr>
        <div class="middle">
            <div class="img-box">
                <img @click="showImg" v-for="(item,index) in 5" :key="index" width="30%" height="100px" src="../../../static/img/apple.jpg" alt="">
            </div>
            <div class="img-text">
                啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧
            </div>
        </div>
        <div class="bottom">
            <div class="commit">
                <h2>评论</h2>
                <hr>
                <mt-field  v-model="commitText" placeholder="请输入评论" type="textarea" rows="2"></mt-field>
                <mt-button type="primary" >发表评论</mt-button>
                <mt-button  class="mint-button mint-button--danger mint-button--large is-plain">加载更多</mt-button>
            </div>
        </div>
        <van-image-preview v-model="show" :images="images" >
        </van-image-preview>
    </div>
</template>

<script>
import DataTime from '../DataTime.vue'
import Header from '../Header/Header.vue'
export default {
    components: { Header, DataTime },
    data(){
        return {
            dateTimeItem:{
                flag : true,
                date:'2015-02-16 11:20:20',
                clickNum:5
            },
            commitText:'',
            show: false,
            images: [
                'https://img01.yzcdn.cn/vant/apple-1.jpg',
                'https://img01.yzcdn.cn/vant/apple-2.jpg',
                '../../../static/img/apple.jpg',
                '../../../static/img/apple.jpg',
                '../../../static/img/apple.jpg'
            ],
        }
    },
    methods:{
        showImg(){
            this.show = true
        }

    }
}
</script>

<style scoped>
.main{
    margin-bottom: 8vh;
}
.top{
    margin-top: 7vh;
    
}
hr{
    margin: 10px 0px;
}
.img-box>img{
    float: left;
    margin:  5px;
}
.img-text{
    clear: both;
    text-align: left;
}

.bottom{
    padding: 5px;
}
h2{
    margin-top: 5px;
    text-align: left;
    margin-bottom: 8px;
}
.commit >>>.mint-field-core{
    resize: none;
}
.mint-cell{
    margin: 8px 0px;
}
.mint-button{
    margin: 5px 0px;
    width: 100%;
}
</style>